<template>
  <div class="index-page">
    <a-input-search
      v-model:value="searchText"
      placeholder="请输入搜索关键词"
      enter-button="搜索"
      size="large"
      @search="onSearch"
    />
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :user-list="userList" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRouter, useRoute } from "vue-router";
import myAxios from "@/plugins/myAxios";
// 不导入组件，则组件无法使用
import PostList from "@/components/PostList.vue";
import UserList from "@/components/UserList.vue";
import PictureList from "@/components/PictureList.vue";
import { message } from "ant-design-vue";

// 路由跳转
const router = useRouter();
// 用于获取当前路由信息
const route = useRoute();
// 根据 url 中的参数更新标签页 以防刷新后 标签页回到 默认标签页
//设置标签默认值为动态路由参数，这样改变标签，默认标签也会跟着改变
//而不是默认post，否则每次刷新都会跳回默认post
const activeKey = route.params.category;
// 初始搜索参数
const initSearchParams = {
  type: activeKey,
  text: "",
  pageSize: 16,
  pageNum: 1,
};
// 搜索框查询内容 抽离出来不然 会和 watchEffect 里面的 loadData(searchParams.value); 冲突
const searchText = ref(route.query.text || "");

// 记录所有的搜索参数
const searchParams = ref(initSearchParams);
// 文章数据列表
const postList = ref([]);
// 用户数据列表
const userList = ref([]);
// 获取图片列表
const pictureList = ref([]);

/**
 * 加载单类数据
 * @param params
 */
const loadData = (params: any) => {
  console.log(params);
  const { type } = params;
  if (!type) {
    message.error("类别为空");
    return;
  }
  const query = {
    ...params,
    searchText: params.text,
  };
  myAxios.post("search/all", query).then((res: any) => {
    if (type === "post") {
      postList.value = res.postList;
    } else if (type === "user") {
      userList.value = res.userList;
    } else if (type === "picture") {
      pictureList.value = res.pictureList;
    }
  });
};
/**
 * 加载聚合数据
 * 只需发送一个请求 传入一个参数 后端获取三个不同源的数据
 * @param params
 */
const loadAllData = (params: any) => {
  console.log(params);
  const query = {
    ...params,
    searchText: params.text,
  };
  // 文章请求
  myAxios.post("search/all", query).then((res: any) => {
    postList.value = res.postList;
    userList.value = res.userList;
    pictureList.value = res.pictureList;
  });
};

/**
 * 最初搜索方案 一开始加载页面就同时发 3 个 http 请求 适合热榜 https://tophub.today/
 * @param params
 */
const loadDataOld = (params: any) => {
  const postQueryParams = {
    ...params,
    searchText: params.text,
  };
  // 文章请求
  myAxios.post("post/list/page/vo", postQueryParams).then((res: any) => {
    postList.value = res.records;
  });
  const userQueryParams = {
    ...params,
    userName: params.text,
  };
  // 用户列表请求
  myAxios.post("user/list/page/vo", userQueryParams).then((res: any) => {
    userList.value = res.records;
  });

  const pictureQueryParams = {
    ...params,
    searchText: params.text,
  };
  // 图片列表请求
  myAxios.post("picture/list/page/vo", pictureQueryParams).then((res: any) => {
    pictureList.value = res.records;
  });
};

// 监控相关参数变化 刷新页面
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams,
    text: route.query.text,
    type: route.params.category,
  } as any;
  loadData(searchParams.value);
});

// 点击查询 跳转到相关标签页 更新查询参数
const onSearch = (value: string) => {
  router.push({
    query: {
      ...searchParams.value,
      text: value,
    },
  });
};
// 标签页名称改变 将路由更新为当前标签页
const onTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParams.value,
  });
};
</script>
